<!--suppress JSObjectNullOrUndefined, TypeScriptValidateTypes -->
<script setup lang="ts">
import { ref } from "vue"
import { emailLoginApi, phoneLoginApi, registerApi, usernameLoginApi } from "@/api/account/login"
import { registerRequestData, usernameLoginRequestData } from "@/api/account/types"
import { ElMessage } from "element-plus"
import { useRouter } from "vue-router"
import { Iphone, Message } from "@element-plus/icons-vue"

const router = useRouter()
const isLogin = ref(false)
const loginEmail = ref("")
const loginPhone = ref("")
const confirm = ref("")
const tempUsername = ref("")
const emailCode = ref("")
const emailResponseCode = ref("")
const emailLoginVisible = ref(false)
const phoneCode = ref("")
const phoneResponseCode = ref("")
const phoneLoginVisible = ref(false)
const emailSendCodeVisible = ref(true)
const phoneSendCodeVisible = ref(true)
const emailTime = ref(60)
const phoneTime = ref(60)
const usernameLoginData: usernameLoginRequestData = {
  username: "",
  password: ""
}
const registerData: registerRequestData = {
  username: "",
  password: ""
}
const emailLoginData = ref({
  email: ""
})
const phoneLoginData = ref({
  phone: ""
})
const usernameLogin = () => {
  if (usernameLoginData.username == "") {
    ElMessage.error("用户名不能为空")
    return
  } else if (usernameLoginData.password == "") {
    ElMessage.error("密码不能为空")
    return
  } else {
    usernameLoginApi(usernameLoginData)
      .then((res) => {
        console.log(res)
        if (res.message == "成功") {
          sessionStorage.setItem("user", JSON.stringify(res.username))
          sessionStorage.setItem("account", JSON.stringify(res.data))
          ElMessage.success("登录成功")
          router.push("/home")
        } else {
          ElMessage.error(res.message)
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }
}
const register = () => {
  if (registerData.username == "") {
    ElMessage.error("用户名不能为空")
    return
  } else if (
    !(
      (registerData.username.at(0) >= "a" && registerData.username.at(0) <= "z") ||
      (registerData.username.at(0) >= "A" && registerData.username.at(0) <= "Z")
    )
  ) {
    ElMessage.error("用户名必须以字母开头")
  } else if (registerData.password == "") {
    ElMessage.error("密码不能为空")
    return
  } else if (confirm.value == "") {
    ElMessage.error("请输入确认密码")
    return
  } else if (registerData.password != confirm.value) {
    ElMessage.error("两次密码不一致")
    return
  } else {
    registerApi(registerData)
      .then((res) => {
        if (res.message == "") {
          ElMessage.success("注册成功")
          sessionStorage.setItem("user", JSON.stringify(registerData.username))
          router.push("/home")
        } else {
          ElMessage.error(res.message)
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }
}
const emailLogin = () => {
  if (loginEmail.value == emailLoginData.value.email) {
    if (emailCode.value == "") {
      ElMessage.error("验证码不能为空")
      return
    } else if (emailCode.value != emailResponseCode.value) {
      ElMessage.error("验证码错误")
      return
    } else {
      sessionStorage.setItem("user", JSON.stringify(tempUsername.value))
      ElMessage.success("登录成功")
      router.push("/home")
    }
  }
}
const phoneLogin = () => {
  if (loginPhone.value == phoneLoginData.value.phone) {
    if (phoneCode.value == "") {
      ElMessage.error("验证码不能为空")
      return
    } else if (phoneCode.value != phoneResponseCode.value) {
      ElMessage.error("验证码错误")
      return
    } else {
      sessionStorage.setItem("user", JSON.stringify(tempUsername.value))
      ElMessage.success("登录成功")
      router.push("/home")
    }
  }
}
const sendEmailCode = () => {
  if (emailLoginData.value.email == "") {
    ElMessage.error("邮箱不能为空")
    return
  } else if (!emailLoginData.value.email.includes("@")) {
    ElMessage.error("邮箱格式不正确")
    return
  } else {
    loginEmail.value = emailLoginData.value.email
    emailLoginApi(emailLoginData.value.email)
      .then((res) => {
        if (res.message == "") {
          ElMessage.success("验证码已发送")
          emailSendCodeVisible.value = false
          setInterval(() => {
            emailTime.value--
            if (emailTime.value == 0) {
              emailSendCodeVisible.value = true
              emailTime.value = 60
            }
          }, 1000)
          emailResponseCode.value = res.data.code
          tempUsername.value = res.username
        } else {
          ElMessage.error(res.message)
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }
}
const sendPhoneCode = () => {
  if (phoneLoginData.value.phone == "") {
    ElMessage.error("手机号不能为空")
    return
  } else if (phoneLoginData.value.phone.charAt(0) != 1 && phoneLoginData.value.phone.length != 11) {
    ElMessage.error("手机号格式不正确")
    return
  } else {
    loginPhone.value = phoneLoginData.value.phone
    phoneLoginApi(phoneLoginData.value.phone)
      .then((res) => {
        if (res.message == "") {
          ElMessage.success("验证码已发送")
          phoneSendCodeVisible.value = false
          setInterval(() => {
            phoneTime.value--
            if (phoneTime.value == 0) {
              phoneSendCodeVisible.value = true
              phoneTime.value = 60
            }
          }, 1000)
          phoneResponseCode.value = res.data.code
          tempUsername.value = res.username
        } else {
          ElMessage.error(res.message)
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }
}
</script>
<template>
  <div class="out">
    <div class="main-box">
      <!--      登录-->
      <div :class="['container', 'container-register', { 'is-txl': isLogin }]">
        <form>
          <h2 class="title">登录到您的账号</h2>
          <input v-model="usernameLoginData.username" class="form__input" type="text" placeholder="用户名" />
          <input v-model="usernameLoginData.password" class="form__input" type="password" placeholder="密码" />
          <div class="flex">
            <span class="text" style="margin-top: 40px">或使用其他方式</span>
            <el-button
              type="primary"
              :icon="Message"
              @click="emailLoginVisible = true"
              style="margin-left: 20px"
              circle
            />
            <el-button type="primary" :icon="Iphone" @click="phoneLoginVisible = true" circle />
            <div class="primary-btn" @click="usernameLogin">立即登录</div>
          </div>
        </form>
      </div>
      <!--      注册-->
      <div :class="['container', 'container-login', { 'is-txl is-z200': isLogin }]">
        <form>
          <h2 class="title">注册新用户</h2>
          <span class="text">填写下方表单注册账号</span>
          <input v-model="registerData.username" class="form__input" type="text" placeholder="用户名" />
          <input v-model="registerData.password" class="form__input" type="code" placeholder="密码" />
          <input v-model="confirm" class="form__input" type="code" placeholder="确认密码" />
          <div class="primary-btn" @click="register">立即注册</div>
        </form>
      </div>
      <div :class="['switch', { login: isLogin }]">
        <div class="switch__circle" />
        <div class="switch__circle switch__circle_top" />
        <div class="switch__container">
          <h2>{{ isLogin ? "立即登录 !" : "注册账号 !" }}</h2>
          <div class="primary-btn" @click="isLogin = !isLogin">
            {{ isLogin ? "点击这里登录" : "点击这里注册" }}
          </div>
        </div>
      </div>
      <div :class="['container']">
        <el-dialog v-model="emailLoginVisible" title="邮箱登录" width="40%" center align-center>
          <el-form label-width="70px" :inline="true">
            <el-form-item label="邮箱" width="50px">
              <el-input v-model="emailLoginData.email" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="验证码">
              <el-input v-model="emailCode" placeholder="请输入验证码" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="sendEmailCode" v-if="emailSendCodeVisible">发送验证码</el-button>
              <el-button type="primary" disabled v-else>{{ emailTime }}s后重新发送</el-button>
            </el-form-item>
            <span class="dialog-footer">
              <el-button @click="emailLoginVisible = false">取 消</el-button>
              <el-button type="primary" @click="emailLogin">确 定</el-button>
            </span>
          </el-form>
        </el-dialog>
      </div>
      <div :class="['container']">
        <el-dialog v-model="phoneLoginVisible" title="手机号登录" width="40%" center align-center>
          <el-form label-width="70px" :inline="true">
            <el-form-item label="手机号" width="50px">
              <el-input v-model="phoneLoginData.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="验证码">
              <el-input v-model="phoneCode" placeholder="请输入验证码" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="sendPhoneCode" v-if="phoneSendCodeVisible">发送验证码</el-button>
              <el-button type="primary" disabled v-else>{{ phoneTime }}s后重新发送</el-button>
            </el-form-item>
            <span class="dialog-footer">
              <el-button @click="phoneLoginVisible = false">取 消</el-button>
              <el-button type="primary" @click="phoneLogin">确 定</el-button>
            </span>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "../../styles/login/login.scss";
</style>
